<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="#FFF">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #000"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #000; font-weight: 600; font-size: 36rpx"
          >{{ $t("common.title.announcement") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>
    <view class="container">
      <block v-for="(item, index) in announcement.data" :key="index">
        <view class="announce_box">
          <view class="flex" style="align-items: center;">
            <view class="badge-yellow">通知</view>
            <view class="title flex1">{{ item.value.title }}</view>
            <view
              class="view_detail"
              @click="
                handleNavTo({
                  url: '/pages/announcement/detailed?id=' + item.id,
                })
              "
              >查看详情</view
            >
          </view>
          <view class="body">
            <view>
              <rich-text
                type="text"
                style="font-size: 24rpx; color: #505050;"
                :nodes="item.value.content"
              ></rich-text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  methods: {
    ...mapActions("announcement", ["loadAnnouncement"]),
  },
  computed: {
    ...mapGetters("announcement", ["announcement"]),
  },
};
</script>

<style>
page {
  background-color: #e1e1e1;
}
.container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.announce_box {
width: 100%;
    background: #ffffff;
    margin-bottom: 24px;
    padding: 10px 16px 5px;
    box-sizing: border-box;
    border-radius: 2px;
}
.title {
    font-size: 15px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 600;
    color: #000000;
}
.view_detail {
    height: 16px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2A96EE;
}
.body {
  text-indent: 1rem;
  max-height: 116rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
      margin: 10px 0;
}
p {display: -webkit-box!important;}
.badge-yellow {
      margin-right: 5px;
      background-color: #FF9800;
      font-size: 12px;
      color: #fff;
      padding: 1px 5px;
      border-radius: 2px;
}
</style>
